<template>
  <div class="changePwdContainer">
      <!-- 顶部返回 -->
      <div class="topBar"><p @click="back()"><yd-icon name="back" class="back"  custom slot="icon" size="18px"></yd-icon></p></div>
      <!-- 图标 -->
      <div class="logo">
          <yd-icon name="changePwd"  custom slot="icon" class="phone" size="100px"></yd-icon>
      </div>
      <!--修改密码 -->
      <div class="changeMain">
          <!-- 手机号 -->
          <div>
               <yd-icon name="pnum"  custom slot="icon"  size=".5rem"></yd-icon>
                <input placeholder="请输入手机号" style="margin-left:.15rem" type="number" max="99999999999" v-model="phoneNumber">
               <yd-sendcode slot="right" init-str="发送验证码" run-str="{%s}秒后重试" reset-str="重新获取" v-model="start" @click.native="sendCode" type="hollow" size="small"></yd-sendcode>
          </div>
          <!-- 短信验证码 -->
           <div>
               <yd-icon name="sure"  custom slot="icon"  size=".4rem"></yd-icon>
              <input placeholder="请输入短信验证码" maxlength="11" v-model="msgWord">
            </div>
            <!-- 密码    -->
            <div>
                <yd-icon name="pwd"  custom slot="icon"  size=".4rem"></yd-icon>
                <input type="password" class="pwdMain" readonly="readonly" placeholder="请设置您的密码" v-model="uPwd" @click="modelShow=true,firstPwd='',secondPwd=''">
                <span @click="eye($event)" style="margin-left: .4rem">
                    <yd-icon name="eye"  custom slot="icon"  size=".37rem" color="#ffffff"></yd-icon>
                </span>
            </div>
      </div>
      <button class="changeBtn" @touchend="toChange">确认修改</button>   
          <!--密码输入两次确认-->
      <div class="pwdContrast" v-if="modelShow">
        <!--关闭按钮-->
        <div class="topClose">
            <p @touchstart="modelShow=false,alertShow=false">
              <yd-icon name="pushBack"  custom slot="icon"  size=".4rem" color="#ffffff"></yd-icon>
            </p>
        </div>
        <!--密码输入确认框-->
        <div class="midContent" >
          <p class="title">密码输入验证</p>
          <p class="care">请注意两次密码输入必须保持一致</p>
          <div class="ipts">
            <div class="frist">
              <yd-icon name="pwd"  custom slot="icon"  size=".4rem" color="#ffffff"></yd-icon>
              <input type="password" class="pwdMain" placeholder="请设置您的密码" v-model="firstPwd">
              <span @click="eye($event)">
                    <yd-icon name="eye"  custom slot="icon"  size=".37rem" color="#ffffff"></yd-icon>
                </span>
            </div>
            <div class="sec">
              <yd-icon name="pwd"  custom slot="icon"  size=".4rem" color="#ffffff"></yd-icon>
              <input type="password" class="pwdMain" placeholder="请设置您的密码" v-model="secondPwd">
              <span @click="eye($event)" >
                    <yd-icon name="eye"  custom slot="icon"  size=".37rem" color="#ffffff"></yd-icon>
                </span>
            </div>
          </div>
          <!--错误提醒文字-->
          <div class="ylAlert" v-show="alertShow">
            <p> <yd-icon name="bulb"  custom slot="icon"  size="20px" color="#fce405"></yd-icon>提示：{{alertMsg}}</p>
          </div>
        </div>
        <!--提交按钮-->
        <button @click="pwdConfirm">提交</button>
      </div>
  </div>
</template>
<script>
export default {
  data() {
            return {
                start: false,//倒计时控制
                phoneNumber:null,//电话号码
                msgWord:null,//短信验证码
                uPwd:'',//密码
                modelShow:false,//密码确认模态框
                alertMsg:'',//提醒消息
                alertShow:false,//提醒消息显示隐藏
                firstPwd:'',//第一次输入密码
                secondPwd:'',//第二次输入密码
                uPwd:'',//最终密码
            }
        },
        methods: {
            eye(e){//查看密码
                if(e.currentTarget.previousElementSibling.type=="password"){
                    e.currentTarget.previousElementSibling.type="text"
                }else {
                    e.currentTarget.previousElementSibling.type="password"
                }
                },
            pwdConfirm(){//确认密码
            let reg=/^[0-9| A-Z | a-z]{6,16}$/;//电话号码正则
            if(reg.test(this.firstPwd)){//通过正则验证
                    if(this.firstPwd===this.secondPwd&&this.firstPwd*this.secondPwd!=0){
                        this.uPwd=this.firstPwd
                        this.modelShow=false
                        this.alertShow=false
                    }else if(this.firstPwd*this.secondPwd==0){//如果密码为空出现提示
                        this.alertShow=true
                        this.alertMsg='密码不能为空，请重新输入密码'
                    }else{
                        this.alertShow=true
                        this.alertMsg='两次密码输入不一致，请重新输入密码'
                    }
            }else{
                this.$dialog.alert({mes: '请输入6-16位数字或字母'});
            }

            },               
            back(){//返回
                this.$router.back()
            },
            sendCode() {//短信倒计时
             let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
              if(!reg.test(this.phoneNumber)){
                    this.$dialog.alert({mes: '请输入正确手机号码'});
                }else{
                this.$dialog.loading.open('发送中...');
                setTimeout(() => {
                    this.start = true;
                    this.$dialog.loading.close();
                    this.$dialog.toast({mes: '已发送',icon: 'success',timeout: 1500});
                }, 1000);
                }
            },
            toChange(){//修改密码
                let data={
                    mobilephone:this.phoneNumber,
                    newpwd:this.uPwd,
                    verifyCode:this.msgWord
                }
                let reg=/^[1][3,4,5,7,8][0-9]{9}$/;//电话号码正则
                let reg1=/^[0-9| A-Z | a-z]{6,16}$/;//密码正则
                if(!reg.test(this.phoneNumber)){
                     this.$dialog.alert({mes: '请输入正确手机号码'});
                }else if(!reg1.test(this.uPwd)){
                    this.$dialog.alert({mes: '请输入6-16位数字或字母密码'});
                }else{
                    this.ylAjax.pwdChange(data)
                    .then(res=>{
                        if(res.state==0){
                               this.$dialog.confirm({
                                    title: '提示',
                                    mes: '修改成功,点击确认返回登录',
                                    opts: () => {
                                       this.$store.commit("phonenumber",this.phoneNumber)
                                       this.$store.commit("password",this.uPwd)
                                       this.$router.push({name:'login'})
                                    }
                                });
                        }else{
                            this.$dialog.alert({mes:res.message})
                        }

                    })
                    .catch(error=>{
                        throw error
                    })
                }
            }
        }
}
</script>
<style lang="less" scoped>
 @import '~less/base';
 @import '~less/icon';
 .changePwdContainer{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: @background-a;
     .topBar{//顶部返回
         height: 1rem;
         line-height: 1rem;
         p{
             width: 20%;
         }
        .back{
         padding: .3rem;
         color: @color-t;
        }
     }
     .logo{//中间logo
        height: 3.3rem;
        line-height: 3.3rem;
        text-align: center;
        .phone{
              color: @color-t;
        }
     }
        
    .changeMain{//注册部分表单
            padding-left: .5rem;
          input{
            width: 4.3rem;
            border: none;
            border-bottom: 1px solid @color-border1;
            height: .6rem;
            line-height: .6rem;
            margin-top: .3rem;
            margin-bottom: .3rem;
            margin-right: .2rem;
            margin-left: .25rem  ;
            font-size: 16px;
            padding-left: .2rem;
        }
        button{//重置按钮样式
            background-color: transparent;
            border: none;
            padding-left: 0;
        }
     }
     .changeBtn{
        width:89%;
        margin-left: 4.75%;
        border: 1px solid @color-border2;
        height: 1rem;
        background-color: @color-btn1;
        border-radius: 5px;
        margin-top: .6rem;
        color: @color-btnFont;
        font-size: 18px;
        letter-spacing:10px
     }
    .pwdContrast{//确认密码遮罩层
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: @model-color-1;
     .topClose{
       height: 1rem;
       line-height: 1rem;
       p{//关闭按钮
         float: right;
         padding:0 .3rem;
       }
     }
     .midContent{//中间主要内容部分
       height: 7.5rem;
       width: 100%;
       .title{//标题
         margin-top: .6rem;
         height: 1.2rem;
         line-height: 1.2rem;
         color: @color-t2;
         text-align: center;
         font-size: 20px;
       }
       .care{//提醒消息
          height: .5rem;
          line-height: .5rem;
          text-align: center;
          font-size: 14px;
          color: @color-c;
       }
       .ipts{//输入框
          margin-top: .75rem;
          padding-left: .56rem;
         input{
           width: 4.3rem;
           border: none;
           border-bottom: 1px solid @color-border3;
           height: .6rem;
           line-height: .6rem;
           margin-top: .4rem;
           margin-bottom: .4rem;
           margin-right: .55rem;
           margin-left: .3rem  ;
           font-size: 14px;
           padding-left: .2rem;
           color:@color-c ;
         }
         input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/
           color:@color-c ;
         }
         input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
           color:@color-c ;
         }
         input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
           color:@color-c ;
         }
         input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */
           color:@color-c ;
         }
       }
       .ylAlert{//错误提醒
         color: @color-t2 ;
         height: 1.4rem;
         line-height: 1.4rem;
         text-align: center;
         font-size: 14px;
         i{
           margin-right:.3rem;
         }
       }
     }
     button{//提交按钮
       margin-top: .6rem;
       width: 90%;
       margin-left: 5%;
       height: 1rem;
       line-height: 1rem;
       background-color: @color-btn1;
       color: @color-btnFont;
       font-size: 18px;
       letter-spacing: 5px;
       border-radius: 5px;
       outline: none;
       border: 1px solid  @color-border3;
     }
     button:active{
       background-color:#FFB36E;
     }
   }
 }
</style>
